<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册 - VideoOrderSystem</title>
    <div th:replace="fragment/header::css"></div>
    <div th:replace="fragment/header::js"></div>
</head>
<div th:replace="fragment/script::contextPath"></div>
<body>
    <div th:replace="fragment/nav::nav"></div>
    <div class="container">
        <div class="card" style="width: 540px;margin: 40px auto 0">
            <div class="card-body">
                <h5 class="card-title" style="font-size: large">用户注册</h5>
<!--                <h6 class="card-subtitle mb-2 text-muted" style="text-decoration: none;">已有账号？点此登录</h6>-->
                <div class="card-text">
                <span th:text="${message}" style="color: red"></span>
                <form th:action="|${#request.contextPath}/user/register|" method="post" id="registerForm">
                    <div class="modal-body">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">用户名</label>
                            <div class="col-sm-10">
                                <input id="register_username" class="form-control" name="userName"
                                       type="text"/>
                                <span id="checkInfo"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">密码</label>
                            <div class="col-sm-10">
                                <input id="register_password" class="form-control" name="password"
                                       type="password"/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">再输一次</label>
                            <div class="col-sm-10">
                                <input id="register_repassword" class="form-control" name="rePassword"
                                       type="password"/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">验证码</label>
                            <div class="col-sm-10 row" style="margin-left: 0;">
                                <input id="register_checkcode" class="form-control" style="width:274px;"
                                       name="register_checkcode" type="text"/>
                                <img id="register_checkcode_state"
                                     th:src="|${#request.contextPath}/image/code/code.png|"
                                     style="cursor:pointer;position:absolute;width: 20px;height: 20px;left: 62%;top: 19%;">
                                <img id="register_checkcode_img"
                                     th:src="|${#request.contextPath}/code/getCode|"
                                     style="height:40px;width:100px;margin-left: 9px;"/>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a href="#" style="left: 0;position: absolute; margin-left: 20px;">已有账号？点此登录</a>
                        <button type="button" class="btn btn-primary" id="regButton" onclick="checkRegister()">注册</button>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </div>
</body>
<script th:fragment="script_register_login" >
    function changeCode() {
        document.getElementById('register_checkcode_img').src = contextPath + "/code/getCode?" + Date.now();
    }

    $(function () {
        document.getElementById('register_checkcode_img').onclick = changeCode;
    })
</script>
<script th:fragment="script_register" >
    $(function () {
        $('#register_username').bind("blur", function () {
            $.ajax({
                type: "post",
                url: contextPath + "/user/checkUsername",
                data: {'username': $('#register_username').val()},
                dataType: "json",
                success: function (data) {
                    $('#checkInfo').html(data.msg);
                    if (!data.isExist) {
                        $('#checkInfo').css("color", "#12ea03")
                        $('#regButton').removeAttr('disabled');
                    } else {
                        $('#checkInfo').css("color", "#dc3545")
                        $('#regButton').attr('disabled', 'disabled');
                    }
                }
            });
        });
    });
    $(function () {
        $('#register_checkcode').bind("blur", function () {
            $.ajax({
                type: "post",
                url: contextPath + "/code/codeVerify",
                data: {'register_checkcode': $('#register_checkcode').val(), 'type': 'register'},
                dataType: "json",
                success: function (data) {
                    if ($('#register_checkcode').val() !== "") {
                        if (data.isRight) {
                            $('#register_checkcode_state').attr("src", contextPath + "/image/code/right.png")
                        } else {
                            $('#register_checkcode_state').attr("src", contextPath + "/image/code/wrong.png")
                        }
                    } else {
                        $('#register_checkcode_state').attr("src", contextPath + "/image/code/code.png")
                    }
                }
            });
        });
    });
    function checkRegister() {
        var regCode = document.getElementById("register_checkcode");
        var regUname = document.getElementById("register_username");
        var regPass = document.getElementById("register_password");
        var regRePass = document.getElementById("register_repassword");
        if (regCode.value === "") {
            swal("请输入验证码。");
            return;
        } else if (regUname.value === "") {
            swal("请输入用户名。");
            return;
        } else if (regPass.value === "") {
            swal("请输入密码。");
            return;
        } else if (regRePass.value === "") {
            swal("请再输一次密码。");
            return;
        } else if (regRePass.value !== regPass.value) {
            swal("两次密码输入不一致。");
            return;
        }
        document.getElementById("registerForm").submit();
    }
</script>
</html>